import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './Paihangbang.css'
export default function Paihangbang() {
    let navigate = useNavigate()
    let [list, setlist] = useState([
        { id: 1, name: '张三', num: 18 },
        { id: 4, name: '李四', num: 19 },
        { id: 3, name: '王五', num: 20 },
        { id: 2, name: '六六', num: 21 },
    ])
    let list1 = () => {
        let arr = list.sort((a, b) => {
            return b.num - a.num
        })
        return arr.slice(0, 1)
    }
    let list2 = () => {
        let arr = list.sort((a, b) => {
            return b.num - a.num
        })
        return arr.slice(1, 2)
    }
    let list3 = () => {
        let arr = list.sort((a, b) => {
            return b.num - a.num
        })
        return arr.slice(2, 3)
    }
    let list4 = () => {
        let arr = list.sort((a, b) => {
            return b.num - a.num
        })
        return arr
    }
    return (
        <div>
            <div className="yzkphbTop">
                <div onClick={() => {
                    navigate("/yzk/wo")
                }}>
                    返回
                </div>
                <div>
                    排行榜
                </div>
                <div> </div>
            </div>
            <hr></hr>
            <div style={{ height: "20rem" }}>
                {
                    list2().map((item) => {
                        return <div className="" key={item.id} style={{ height: "20rem", float: "left", width: "33%", marginLeft: "1rem" }}>
                            <span><img src='https://cdn7.axureshop.com/demo/1997433/images/%E6%8E%92%E8%A1%8C%E6%A6%9C/u8824.png' alt='' className='yzkphbimg1'></img></span>
                            <dl>
                                <dt><img src="https://preview.qiantucdn.com/freepik/free-photo/51317735.jpg!w1024_new_small_1" alt='' className='yzkphbimg2'></img></dt>
                                <dd style={{ marginLeft: "3rem" }}><h3>第二名</h3></dd>
                                <h2 style={{ marginLeft: "3rem" }}>{item.name}</h2>
                            </dl>
                        </div>
                    })
                }
                {
                    list1().map((item) => {
                        return <div className="" key={item.id} style={{ float: 'left' }}>
                            <span><img src='https://cdn7.axureshop.com/demo/1997433/images/%E6%8E%92%E8%A1%8C%E6%A6%9C/u8824.png' alt='' className='yzkphbimg1'></img></span>
                            <dl>
                                <dt><img src="https://t7.baidu.com/it/u=2791987306,200742997&fm=217&app=137&size=f242,150&n=0&f=JPEG&fmt=auto?s=518BB955EA76678E0815D4630300E052&sec=1731344400&t=81e3ae2192b4feb9b684a50b619eae44" alt='' className='yzkphbimg2'></img></dt>
                                <dd style={{ marginLeft: "3rem" }}><h3>第一名</h3></dd>
                                <h2 style={{ textAlign: "center" }}>{item.name}</h2>
                            </dl>
                        </div>
                    })
                }
                {
                    list3().map((item) => {
                        return <div className="" key={item.id} style={{ float: "left", marginLeft: "3rem" }}>
                            <span><img src='https://cdn7.axureshop.com/demo/1997433/images/%E6%8E%92%E8%A1%8C%E6%A6%9C/u8824.png' alt='' className='yzkphbimg1'></img></span>
                            <dl>
                                <dt><img src="https://img0.baidu.com/it/u=3739848321,4011490193&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731344400&t=e787f6bed3c5918435f71912ef3e7ef5" className='yzkphbimg3'></img></dt>
                                <dd style={{ marginLeft: "3rem" }}><h3>第三名</h3></dd>
                                <h2 style={{ marginLeft: "3rem" }}>{item.name}</h2>
                            </dl>
                        </div>
                    })
                }
            </div>
            <div style={{ height: "80vh", width: "100vw", borderTop: "0.5rem solid #eee"}}>
                {
                    list4().map((item, index) => {
                        return <div key={item.id} className='item'>
                            <div style={{width:"15rem", display: "flex", justifyContent: "space-between"}}>
                                <span style={{ marginLeft: "3rem" }}><h3>{index + 4}</h3></span>
                                <div>
                                    <span> <img src="https://img0.baidu.com/it/u=3906042382,1426674451&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1731344400&t=fef5a0538ebab3862ec5bf0022e939fc" className='yzkphbimg2'></img></span>
                                </div>
                            </div>
                            <div className='yzkphbdiv'>
                                <h2 style={{ marginLeft: "2.6rem" }}>{item.name}</h2>
                            </div>
                        </div>
                    })
                }
            </div>
        </div>
    )
}
